<template>

    <view class="container">
        <u-form :model="form" ref="uForm">
            <input type="hidden" v-show="false" v-model="form.cardidType">
            <view class="form-row">
                <view class="row-label">
                    <text decode="true">证件类型</text>
                </view>
                <view>
                    <u-form-item prop="cardidType">
                        <u-input v-model="cardidTypeValue" placeholder="请选择证件类型" type="select"
                                 @click="idTypeShow = true"/>
                    </u-form-item>
                    <u-action-sheet :list="cardidTypeOptions" v-model="idTypeShow"
                                    @click="idTypeCallBack"></u-action-sheet>
                </view>
            </view>

            <view class="cardid-form-row">
                <view class="cardid-label">
                    <text>上传证件</text>
                </view>
                <view class="cardid-2-image">
                    <view class="cardid-image">
                        <u-upload
                                ref="imageFrontUpload"
                                :action="action"
                                :width="320"
                                :height="200"
                                :max-count="1"
                                :auto-upload="true"
                                :custom-btn="true"
                                :show-progress="false"
                                :file-list="frontList"
                                @on-choose-complete="onChoose(1)"
                                @on-success="handleFrontImageUpload"
                                @on-remove="onRemove(1)">
                            <view slot="addBtn" class="slot-btn">
                                <image :src="iconUrl+'身份证正面.png'" v-show="cardid1"></image>
                            </view>
                        </u-upload>
                    </view>
                    <view class="cardid-image">
                        <u-upload
                                ref="imageBackUpload"
                                :action="action"
                                :width="320"
                                :height="200"
                                :max-count="1"
                                :auto-upload="true"
                                :custom-btn="true"
                                :show-progress="false"
                                :file-list="backList"
                                @on-success="handleBackImageUpload"
                                @on-choose-complete="onChoose(2)"
                                @on-remove="onRemove(2)">
                            <view slot="addBtn" class="slot-btn">
                                <image :src="iconUrl+'身份证反面.png'" v-show="cardid2"></image>
                            </view>
                        </u-upload>
                    </view>
                </view>
                <view class="cardid-foot">
                    <view class="cardid-foot-text">
                        <text>证件照片-正面</text>
                    </view>
                    <view class="cardid-foot-text">
                        <text>证件照片-背面</text>
                    </view>
                </view>
            </view>
            <view class="form-row">
                <view class="row-label">
                    <text>真实姓名</text>
                </view>
                <u-form-item prop="userName">
                    <u-input v-model="form.userName" placeholder="请输入真实姓名" type="input" :clearable="false"/>
                </u-form-item>
            </view>
            <view class="form-row">
                <view class="row-label">
                    <text>证件号码</text>
                </view>
                <u-form-item prop="userCardid">
                    <u-input v-model="form.userCardid" placeholder="请输入证件号码" type="input" :clearable="false"/>
                </u-form-item>
            </view>
            <view class="form-row">
                <view class="row-label">
                    <text>银行卡号</text>
                </view>
                <u-form-item prop="bankCardno">
                    <u-input v-model="form.bankCardno" placeholder="请输入银行卡号" type="number" :clearable="false"/>
                </u-form-item>
            </view>
            <view class="bottom-btn">
                <u-button type="primary" @click="submitForm">提交</u-button>
            </view>
        </u-form>
    </view>

</template>

<script>

    export default {
        data() {
            return {
                // 表单参数
                form: {
                    cardidType: '',
                    userName: '',
                    userCardid: '',
                    bankCardno: '',
                    picFrontUrl: '',
                    picBackUrl: ''
                },
                iconUrl: this.iconUrl,
                action: this.baseUrl + '/api/imageUpload',
                cardid1: true,
                cardid2: true,
                idTypeShow: false,
                cardidType: '',
                frontList: [],
                backList: [],
                cardidTypeValue: '',
                cardidTypeOptions: []
            }
        },
        onLoad() {
            this.$getDictList('cardid_type', {
                success: (cts) => {
                    this.cardidTypeOptions = cts.data;
                    this.cardidTypeOptions.forEach((cardidTypeOption) => {
                        cardidTypeOption.text = cardidTypeOption.dictLabel;
                    });
                }
            });
        },
        methods: {
            // 点击选择证件类型
            idTypeCallBack(index) {
                this.form.cardidType = this.cardidTypeOptions[index].dictValue;
                this.cardidTypeValue = this.cardidTypeOptions[index].dictLabel;
            },
            onChoose(type) {
                if (type === 1) {
                    this.cardid1 = false;
                }
                if (type === 2) {
                    this.cardid2 = false;
                }
            },
            onRemove(type) {
                if (type === 1) {
                    this.cardid1 = true;
                }
                if (type === 2) {
                    this.cardid2 = true;
                }
            },
            handleFrontImageUpload(res, index) {
                if (res.code === '20000') {
                    this.form.picFrontUrl = res.data;
                    uni.showToast({
                        title: "上传成功",
                        type: "success",
                        icon: 'none'
                    });
                } else {
                    uni.showToast({
                        title: "上传失败",
                        type: "error",
                        icon: 'none'
                    });
                    this.$refs.imageFrontUpload.remove(index);
                    this.cardid1 = true;
                }
            },
            handleBackImageUpload(res, index) {
                if (res.code === '20000') {
                    this.form.picBackUrl = res.data;
                    uni.showToast({
                        title: "上传成功",
                        type: "success",
                        icon: 'none'
                    });
                } else {
                    uni.showToast({
                        title: "上传失败",
                        type: "error",
                        icon: 'none'
                    });
                    this.$refs.imageBackUpload.remove(index);
                    this.cardid2 = true;
                }
            },
            submitForm() {
                if (this.form.cardidType === '') {
                    uni.showToast({
                        title: "证件类型不能为空",
                        type: "error",
                        icon: 'none'
                    });
                    return;
                }
                if (this.form.picFrontUrl === '') {
                    uni.showToast({
                        title: "证件正面不能为空",
                        type: "error",
                        icon: 'none'
                    });
                    return;
                }
                if (this.form.picBackUrl === '') {
                    uni.showToast({
                        title: "证件背面不能为空",
                        type: "error",
                        icon: 'none'
                    });
                    return;
                }
                if (this.form.userName === '') {
                    uni.showToast({
                        title: "真实姓名不能为空",
                        type: "error",
                        icon: 'none'
                    });
                    return;
                }
                if (this.form.userCardid === '') {
                    uni.showToast({
                        title: "证件号码不能为空",
                        type: "error",
                        icon: 'none'
                    });
                    return;
                }
                if (this.form.bankCardno === '') {
                    uni.showToast({
                        title: "银行卡号不能为空",
                        type: "error",
                        icon: 'none'
                    });
                    return;
                }
                if (this.form.bankCardno.length < 15 || this.form.bankCardno.length > 19) {
                    uni.showToast({
                        title: "银行卡号格式不正确",
                        type: "error",
                        icon: 'none'
                    });
                    return;
                }

                this.$sendRequest({
                    url: '/api/wx/userAuth',
                    method: 'POST',
                    data: this.form,
                    success: (cts) => {
                        uni.showToast({
                            title: "实名认证已提交, 请耐心等待审核!",
                            type: "success",
                            icon: 'checkbox-mark'
                        });
                        uni.switchTab({
                            url: "/pages/mine/index"
                        });
                    }
                });

            }
        }
    }
</script>


<style lang="scss">
    page {
        background-color: #FFFFFF;
        position: relative;
        font-size: 28rpx;
    }

    .container {
        margin: 20rpx 20rpx;
        .form-row {
            background-color: #F1F1F1;
            border-radius: 10rpx;
            margin: 30rpx 0;
            display: flex;

            .row-label {
                margin: 40rpx 0 30rpx 20rpx;
            }

            .u-input {
                width: 550rpx;
                height: 68rpx;
                background-color: #F1F1F1;
                align-items: center;
            }

            .u-input__input.data-v-25cf517a {
                font-size: 22rpx;
                margin-top: 0rpx;
                text-align: right;
            }
        }

        .cardid-form-row {
            background-color: #F1F1F1;
            border-radius: 8rpx;
            margin: 20rpx 0;
            padding: 20rpx 20rpx;
            .cardid-2-image{
                padding: 10rpx 0rpx;
                display: flex;
                .cardid-image{
                    padding-right: 20rpx;
                    image {
                        width: 320rpx;
                        height: 200rpx;
                    }
                }

            }
            .slot-btn {
                display: flex;
            }
            .cardid-foot{
                display: flex;
                .cardid-foot-text{
                    margin-left: 89rpx;
                    margin-right: 128rpx;
                }
                text{
                    font-size: 18rpx;
                }
            }
        }
        .bottom-btn{
            /*margin-top: 380rpx;*/
            /*margin-bottom: 40rpx;*/
            button {
                position: fixed;
                left: 40rpx;
                bottom: 60rpx;
                border-radius: 50rpx;
                width: 680rpx;
            }
        }


    }

    .u-icon__icon.data-v-72dbdbb4 {
        top: -6rpx !important;
    }

</style>

